<template>
  <div>
    <a-drawer
      title="修改数据"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        hide-required-mark
      >
        <a-form-item label="字段名称">
          <a-input v-model="formData.name" placeholder="请输入字段名称" />
        </a-form-item>
        <a-form-item label="是否必填">
          <a-radio-group
            :options="plainOptions"
            v-model="formData.isNull"
            :default-value="1"
          />
        </a-form-item>
        <a-form-item label="字段类型">
          <a-select v-model="formData.type">
            <a-select-option value="1"> 单行文本 </a-select-option>
            <a-select-option value="2"> 日期类型 </a-select-option>
            <a-select-option value="3"> 单选下拉框 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="字段选项" v-show="formData.type == '1'">
          <a-input placeholder="请输入字段选项值" v-model="formData.select" />
        </a-form-item>

        <a-form-item label="字段选项" v-show="formData.type == '2'">
          <a-radio-group v-model="formData.select">
            <a-radio :style="radioStyle" value="1"> 年 - 月</a-radio>
            <a-radio :style="radioStyle" value="2"> 年 - 月 - 日 </a-radio>
            <a-radio :style="radioStyle" value="3">
              年 - 月 - 日 时 - 分
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="字段选项" v-show="formData.type == '3'">
          <a-radio-group :default-value="0" button-style="solid">
            <div
              class="group-flex"
              v-for="(item, index) in radioSelectData"
              :key="index"
            >
              <a-radio-button
                :value="index"
                :style="{
                  display: 'block',
                  borderRadius: '0',
                }"
              >
                选项{{ index + 1 }}
              </a-radio-button>
              <a-icon
                style="margin-left: 10px"
                type="close-circle"
                @click="delRadio(index)"
              />
            </div>
          </a-radio-group>

          <a-button class="radio-add" @click="addRadio">添加</a-button>
        </a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button @click="onClose" :style="{ marginRight: '8px' }">
          关闭
        </a-button>
        <a-button type="primary" @click="submit"> 提交 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: true,
      plainOptions: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],

      formData: {
        key: 0,
        name: "",
        isNull: 1,
        type: "1",
        select: "",
      },

      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },

      radioSelectData: [0, 1],
    };
  },

  mounted() {
    this.formData.name = this.data.name;
    this.formData.key = this.data.key;
    this.formData.isNull = this.data.isNull;
    this.formData.type = this.data.type;
    if (this.formData.type == 1 || this.formData.type == 2) {
      this.formData.select = this.data.select;
      // this.formData.type = this.data.type;
    } else if (this.formData.type == 3) {
      // return "日期类型";
      this.radioSelectData = [];
      this.data.select.split(",").map((item, index) => {
        this.radioSelectData.push(index);
      });
    }

    // if()
    // console.log(this.data);
  },
  methods: {
    delRadio(index) {
      this.radioSelectData.splice(index, 1);
    },

    submit() {
      // this.$
      let list = [];
      if (this.formData.type == 3) {
        this.radioSelectData.map((item) => {
          list.push(`选项${item + 1}`);
        });
        this.formData.select = list.toString();
      }
      // this.onClose();
      this.$emit("onSubmit", this.formData);
    },

    onClose() {
      this.$emit("onClose");
    },

    addRadio() {
      this.radioSelectData.push(this.radioSelectData.length);
    },
  },
};
</script>
<style scoped>
.group-flex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-add {
  margin-left: 20px;
}
</style>